<template>
  <el-card
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
    class="board-hover"
  >
    <div slot="header">
      <span>数据库</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        icon="el-icon-refresh-right"
        @click="getlist()"
      >
      </el-button>
      <span class="tip">每小时自动刷新:{{ loadTime }}</span>
    </div>
    <div class="el-table el-table--enable-row-hover el-table--medium">
      <table cellspacing="0" style="width: 100%">
        <thead>
          <tr>
            <th class="is-leaf board-title">
              <div class="cell">属性</div>
            </th>
            <th class="is-leaf board-title">
              <div class="cell">值</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in datas" :key="index" :class="{'item-danger': item.warn ,'board-row':index%2==0}">
            <td>
              <div class="cell">{{ item.name }}</div>
            </td>
            <td>
              <div class="cell" v-if="item" >
                <!-- {{ formatNum(item.val) }} -->
                {{ item.val }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-card>
</template>

<script>
import { getDBInfo } from "@/api/aitcommon/aitdashboard";
import { formatNumber } from "@/utils/ait.js";

export default {
  name: "aitLog",
  data() {
    return {
      datas: {},
      loading: false,
      loadTime: "",
      // 定时刷新(秒)
      timeSec: 60 * 60,
      timeChecked: true,
      timer: {},
    };
  },
  created() {
    this.getlist();

    // 设置定时刷新
    if (this.timeChecked) {
      this.timer = window.setInterval(this.getlist, this.timeSec * 1000);
    } else {
      window.clearInterval(this.timer);
    }
  },
  methods: {
    formatNum(num) {
      return formatNumber(num);
    },
    getlist() {
      this.loading = true;
      getDBInfo()
        .then((res) => {
          // console.info('getDBInfo', res)
          this.loadTime = this.parseTime(new Date());
          this.datas = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.board-hover {
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
  }
}

.tip {
  float: right;
  color: gray;
  font-size: 10px;
  margin-right: 10px;
}
.board-title{
  background-color:#304156;
  color: white;
}
.board-row {
  background-color: #e8f4ff;
}

.item-danger{
  color:red;
  background-color:blanchedalmond;
}

.hover-under {
    &:hover {
    color: brown;
    text-shadow: 2px 2px 5px;
    text-decoration: underline;
    cursor: pointer;
    }
}

</style>
